<template>
  <div class="home-container ibg-bg">
    <div class="" ></div>
      <div class="center">
        <h1>中未智联数字智能健身馆</h1>   
        <h3>让人人热爱健身</h3>
        <a href="#/product"><button>查看详情</button></a>
      </div>
  <bottom></bottom>
  </div>
</template>

<script>
import Bottom from './Bottom'
export default {
  name: 'home',
  data () {
    return {
//    text1:DataManager.HomeText.h1,
//    text2:DataManager.HomeText.h3
    }
  },components:{
    Bottom
  },created(){
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,h3{
  -moz-user-select: none;
  -webkit-user-select: none;
  cursor: default;
}
h3{
  font-weight: 400;
  color: #dadada;
  font-size: 15px;
  margin: 20px 20% 100px;
}
h1{
  line-height: 50px;
  letter-spacing: 6px;
  margin: 0 10%;
  font-size: 28px;
  font-weight: 400;
 color: white;
   
}
.center{
  position: relative;
  top: 150px;
}
button{
  letter-spacing: 3px;
  font-family: "microsoft yahei";
  cursor: pointer;
  border-radius: 8px;
  border: solid 1px white;
  outline: none;
  font-size: 14px;
  padding: 10px 40px;
  color: white;
  display: block;
  margin: auto;
  background: transparent;
}
button:hover{
  background: rgba(0,0,0,0.7);
  color: #dadada;
  border-color: #dadada;
}
.bg{
  width: 100%;
  height: 100%;
  
  }
.ibg-bg{
  position: absolute;
  background: url('../assets/img/mainbg.jpg') no-repeat 32% 100%;
  background-size: cover;       
}
.home-container{
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
